<%@ page language="java" import="java.util.*" contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8" />
	<title>北京市人民政府外事办公室领事保护教育服务平台</title>
	<link rel="stylesheet" href='<c:url value="/share/bootstrap.css"></c:url>'/>
	<link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>' />
	<script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
	<style type="text/css">
		html,body {
			height: 100%;
		}
		.box {
			filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF'); /*  IE */
			background-image:linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-o-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-moz-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-webkit-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			background-image:-ms-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
			
			margin: 0 auto;
			position: relative;
			width: 100%;
			height: 100%;
		}
		.login-box {
			width: 100%;
			max-width:500px;
			position: absolute;
			top: 50%;

			margin-top: -200px;
			/*设置负值，为要定位子盒子的一半高度*/
			
		}
		@media screen and (min-width:500px){
			.login-box {
				left: 50%;
				/*设置负值，为要定位子盒子的一半宽度*/
				margin-left: -250px;
			}
		}	

		.form {
			width: 100%;
			max-width:500px;
			height: 275px;
			margin: 25px auto 0px auto;
			padding-top: 25px;
		}	
		.login-content {
			width: 100%;
			max-width:500px;
			background-color: rgba(255, 250, 2550, .6);
			float: left;
		}		
			
			
		.input-group {
			margin: 0px 0px 30px 0px !important;
		}
		.form-control,
		.input-group {
			height: 40px;
		}

		.form-group {
			margin-bottom: 0px !important;
		}
		.login-title {
			padding: 20px 10px;
			background-color: rgba(0, 0, 0, .6);
		}
		.login-title h1 {
			margin-top: 10px !important;
		}
		.login-title small {
			color: #fff;
		}

		.link p {
			line-height: 20px;
			margin-top: 30px;
		}
		.btn-sm {
			padding: 8px 24px !important;
			font-size: 16px !important;
		}
	</style>
</head>
<body>
	<div class="home_header">
		<div class="Interface_center row">
		  <div class="col-xs-6">
			<div class="home_header_left">
					<span><img src='<c:url value="/share/images/book.png"></c:url>' />外事办公室领事保护处教育平台</span>
				</div>
		  </div>
		  <div class="col-xs-6">
				<div class="home_header_right">
					<a href="login.html">登录</a>
					<a href="reg.html">注册</a>
				</div>
		  </div>
		  </div>
	</div>
	<div class="home_header_2">
		<div class="login-box" style="background: #295c96;">
			<div class="login-title text-center">
				<h1><small>注册</small></h1>
			</div>
			<div class="login-content ">
			<div class="form">
			<form action="#" method="post">
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
							<input type="tel" id="username" name="username" class="form-control" placeholder="手机号" />
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
							<input type="tel" id="username" name="username" class="form-control" placeholder="输入验证码" style="width: 69%;height: 42px;" />
							<button type="submit" class="btn btn-sm btn-info login" style="width: 31%;">获取验证码</button>
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
							<input type="text" id="password" name="password" class="form-control" placeholder="密码" />
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="col-xs-12  ">
						<div class="input-group">
							<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
							<input type="text" id="password" name="password" class="form-control" placeholder="再次输入密码" />
						</div>
					</div>
				</div>
				<div class="form-group form-actions">
					<div class="col-xs-4 col-xs-offset-4" style="padding-bottom: 30px;">
						<a type="submit" class="btn btn-sm btn-info login"><span class="glyphicon glyphicon-off"></span> 注册</a>
					</div>
				</div>
			</form>
			</div>
		</div>
	</div>
	</div>
	<script type="text/javascript">
		$(".login").click(function(){
			location.href = "login.html";
		});
	</script>
</body>
</html>